<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="formData.phoneStr" clearable placeholder="请输入手机号" style="width: 160px;" class="filter-item" @keyup.enter.native="getData" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="getData">
        搜索
      </el-button>
      <el-button v-waves class="filter-item" type="success" icon="el-icon-plus" @click="centerDialogVisible = true">
        批量搜索
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="姓名" align="center" prop="name" width="90"/>
      <el-table-column label="手机号" align="center" prop="phone"/>
      <el-table-column label="渠道" align="center" prop="channel"/>
      <el-table-column label="投放状态" align="center" prop="isLaunch" width="120"/>
      <el-table-column label="创建时间" align="center" prop="creatTime"/>
      <!-- <el-table-column label="操作" class-name="status-col" width="200">
        <template slot-scope="scope">
          <el-button type="primary" >计算</el-button>
          <el-popconfirm
            :title="`确定删除${scope.row.channelName}吗？`"
            @onConfirm="delFun(scope.row)"
          >
            <el-button slot="reference" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column> -->
    </el-table>

    <!-- <pagination
      v-show="total>0"
      :total="total"
      :page.sync="formData.pageNum"
      :limit.sync="formData.pageSize"
      @pagination="getData"
    /> -->

    <el-dialog
      title="渠道查询"
      :visible.sync="centerDialogVisible"
      width="600px"
      :close-on-click-modal="false"
      >
      <el-input
        type="textarea"
        :rows="10"
        placeholder="请输入手机号"
        v-model="morePhone">
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getData(1)">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { searchChannel } from '@/api/sys'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'Phonelist',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      formData: {
        phoneStr: ''
      },
      tableData: [],
      total: 0,
      listLoading: false,
      morePhone: '',
      centerDialogVisible: false
    }
  },
  created() {
    // this.getData()
  },
  methods: {
    getData(num){
      this.listLoading = true
      let val
      if( num == '1' ){
        if( this.morePhone == '' ){
          this.$message.error('请输入手机号码');
          return false
        }
        val = {
          phoneStr: this.morePhone
        }
      } else {
        val = {
          phoneStr: this.formData.phoneStr
        }
      }
      searchChannel(val).then( res => {
        this.listLoading = false;
        if( res.data.code == '200' ){
          this.tableData = res.data.data
          if( num == '1' ) {
            this.centerDialogVisible = false
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  color:rgb(172, 176, 177);
}
.title{
  margin-top: 10px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid rgb(138, 219, 230) 2px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
}
.link-top {
  margin-left: 10px;
  margin-top: 10px;
  width: 100%;
  height: 2px;
  border-top: solid rgb(138, 219, 230) 2px;
}
.link-title {
  margin-left: 10px;
  margin-top: 10px;
  width: 80px;
  height: 2px;
  border-top: solid rgb(172, 176, 177) 2px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
